<template>
  <div class="p-border-box p-page-break"
       style="width: 76mm;height: 130mm;color: #000000;'font-family': 'Microsoft YaHei';background-color: white;font-size: 3mm">
    <!--头部-->
    <div style="position: relative;height: 20mm!important;overflow: hidden">
      <!--<div style="position: absolute;width: 33mm;background-color: white">-->
      <!--  <div style="padding-left: 2mm;width: 33mm;height: 9mm!important;font-size: 14mm;line-height: 14mm;font-weight: bold">LYD</div>-->
      <!--</div>-->
      <div style="position: absolute;top: 8mm;left: 2mm">
        <img style="width: 18mm" src="../../../assets/brand.jpg">
      </div>

      <div style="text-align: right;line-height: 6mm;font-size: 3.4mm;font-weight: bold;letter-spacing: 0.1mm;padding-right: 1mm">
        <span class="p-b-b">老挝韻達物流科技集团公司</span>
      </div>
      <div style="position: relative;top: 1mm;height: 6mm;line-height: 6mm;font-size: 5mm;text-align: right;font-weight: bold;;padding-right: 1mm">
        {{item.operationList | formatArray('sendToName')}}
      </div>
      <div style="position: relative;top: 1mm;height: 6mm;line-height: 6mm;font-size: 5mm;text-align: right;font-weight: bold;;padding-right: 1mm">
        {{item.operationList | formatArray('laosSendToName')}}
      </div>
    </div>
    <div class="p-flex p-j-b" style="height: 4.5mm;padding:0 2mm 0 2mm">
      <span
        style="line-height: 4.5mm">{{item.operationList | formatArray('currentUserName')}}—{{item.operationList | formatArray('sendToUserName')}}</span>
      <span style="line-height: 4.5mm">LYD{{item.operationList | formatArray('currentName')}}</span>
    </div>
    <div class="p-flex" style="line-height: 3.2mm;padding:0 2mm">
      <div class="p-grow-1">
        <div>重量(ນ້ ຳ ໜັກ)：{{item.weight}}</div>
      </div>
    </div>
    <div class="p-flex" style="line-height: 3.2mm;padding:0 2mm">
      <div class="p-grow-1">
        <div>保价费 {{item.protectFee}}</div>
        <div>ລາຄ່າປະກັນ</div>
        <div>总件数 {{item.totalFee}}</div>
        <div>ຈຳ ນວນທັງ ໝົດ</div>
      </div>
      <div class="p-grow-1">
        <div>报关费 {{item.customsFee}}</div>
        <div>ເສຍຄ່າພາສ</div>
        <div>运费 {{item.freight}}</div>
        <div>ຄ່າສົ່ງ</div>
      </div>
    </div>
    <!--中部-->
    <div style="height: 76.5mm!important;" class="p-flex p-b-b p-border-box">
      <div style="width: 75mm" class="p-border-box">
        <div class="p-flex p-b-b p-b-t">
          <div style="width: 60mm">
            <div style="height: 23mm!important;" class="p-flex p-b-b">
              <div
                style="text-align:center;width: 9mm;padding: 1mm;"
                class="p-flex p-b-r p-column p-border-box p-j-c">
                <span>收件</span><br>
                <div>ຮັບເຄື່ອງ</div>
              </div>
              <div style="padding: 0;width: 51mm;font-size: 3.5mm">
                <div style="line-height: 4mm" class="p-flex p-j-a">
                  <span>{{item.receiverName}}</span>
                  <span>{{item.receiverPhone}}</span>
                </div>
                <div style="line-height: 4mm" class="p-flex p-j-a">
                  <span>{{item.laosReceiverName}}</span>
                  <span>{{item.receiverPhone}}</span>
                </div>
                <div style="line-height: 4mm">
                  <span>{{item.receiverAddress}}</span>
                </div>
                <div style="line-height: 4mm">
                  <span>{{item.laosReceiverAddress}}</span>
                </div>
              </div>
            </div>
            <div style="height: 22mm!important;" class="p-flex">
              <div style="text-align:center;width: 9mm;padding: 1mm;"
                   class="p-flex p-column p-j-c p-border-box p-b-r">
                <span>寄件</span><br>
                <span>ຝາກເຄື່ອງ</span>
              </div>
              <div style="padding: 0;width: 51mm;font-size: 3mm">
                <div style="line-height: 4mm" class="p-flex p-j-a">
                  <span>{{item.senderName}}</span>
                  <span>{{item.senderPhone}}</span>
                </div>
                <div style="line-height: 4mm" class="p-flex p-j-a">
                  <span>{{item.laosSenderName}}</span>
                  <span>{{item.senderPhone}}</span>
                </div>
                <div style="line-height: 4mm">
                  <span>{{item.senderAddress}}</span>
                </div>
                <div style="line-height: 4mm">
                  <span>{{item.laosSenderAddress}}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="p-flex p-b-l" style="position: relative;width: 16mm">
            <!--<img class="p-fit"-->
            <!--     style="position: absolute;transform: rotate(90deg);width: 44mm!important;height: 10mm;left: -13mm;top: 17.5mm"-->
            <!--     :src="$baseApi + item.path" alt="条形码">-->
            <js-barcode
              style="position: absolute;transform: rotate(90deg);left: -13mm;top: 17.5mm"
              v-if="item.number" :number="item.number" width="44mm" height="10mm"/>
            <div
              style="position: absolute;transform: rotate(90deg);width: 45mm;text-align: center;left: -20.5mm;top: 20mm">
              {{item.number}}
            </div>
          </div>
        </div>
        <div style="padding: 0.5mm 0 0 0;height: 15mm!important;line-height: 3mm"
             class="p-flex p-j-e p-border-box">
          <div style="margin-left: 1mm">
            <!--<img class="p-fit" style="width: 60mm;height: 10.5mm" :src="$baseApi + item.path" alt="条形码">-->
            <js-barcode v-if="item.number" :number="item.number" width="60mm" height="10.5mm"/>
            <div style="text-align: center">{{item.number}}</div>
          </div>
          <img style="height: 12mm;width: 12mm" src="../../../assets/print/wechat-code.png" alt="二维码">
        </div>
        <div style="width: 75mm;line-height: 3mm;padding: 0 1mm" class="p-border-box">
          <span>您的签字代表您已验收过此货物，并且确认商品信息无误，包装完好</span><br>
          <span>ລາຍເຊັນຂອງທ່ານສະແດງວ່າທ່ານໄດ້ກວດເບິ່ງແລະຍອມຮັບເອົາຊຸດນີ້,ແລະຢືນຢັນວ່າຂໍ້ມຸນຂອງຜະລິດຕະພັນແມ່ນຖືກຕ້ອງ,ການຫຸ້ມຫໍ່ແມ່ນຍັງຄົບຖ້ວນຢູ.</span>
        </div>
      </div>
    </div>
    <!--底部-->
    <div style="width: 76mm;padding: 0.5mm;line-height: 3.2mm" class="p-border-box p-flex p-j-a">
      <div>
        <div>签收人</div>
        <div>ຜູ້ເຊັນຮັບ</div>
      </div>
      <div>
        <div>时间</div>
        <div>ເວລາ</div>
      </div>
    </div>
    <div style="height: 5mm;padding: 0.5mm 2mm" class="p-flex p-border-box">
      <div style="overflow: hidden;width: 44mm;white-space: nowrap">内件品名:{{item.articleName}}(已验视)</div>
      <div v-if="item.printTime" style="width: 28mm;">{{item.printTime | formatDateMM}}</div>
      <div v-else style="width: 28mm;">{{item.updateTime | formatDateMM}}</div>
    </div>
  </div>
</template>

<script>
  import JsBarcode from '../components/JsBarcode'

  export default {
    name: "Union",
    components: {JsBarcode},
    props: {
      item: {}
    }
  }
</script>
